import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../core/comments/custom_app_bar.dart';
import '../../../viewmodel/home/add_friend/add_friend_view_model.dart';

class AddFriendPage extends StatefulWidget {
  const AddFriendPage({super.key});

  @override
  _AddFriendPage createState() => _AddFriendPage();
}

class _AddFriendPage extends State<AddFriendPage> {
  final TextEditingController _searchKeyWord = TextEditingController();

  @override
  void dispose() {
    _searchKeyWord.dispose();
    super.dispose();
  }

  void _onClear() {
    _searchKeyWord.clear();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    final vm = context.watch<AddFriendViewModel>();
    return Scaffold(
      appBar: const CustomAppBar(
        title: Text(
          '添加朋友',
          style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
        ),
        showBottomLine: true,
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(12, 6, 12, 6),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 32,
              decoration: BoxDecoration(
                color: const Color(0xFFF6F0FA),
                borderRadius: BorderRadius.circular(16),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Row(
                children: [
                  const Icon(Icons.search, size: 16, color: Colors.grey),
                  const SizedBox(width: 4),
                  Expanded(
                    child: TextField(
                      controller: _searchKeyWord,
                      autofocus: true,
                      onChanged: (_) => setState(() {}),
                      onSubmitted: vm.search,
                      style: const TextStyle(fontSize: 13, height: 1),
                      decoration: const InputDecoration(
                        isCollapsed: true,
                        border: InputBorder.none,
                        hintText: '搜索 账号/ID',
                        hintStyle: TextStyle(fontSize: 13, color: Colors.grey),
                        contentPadding: EdgeInsets.zero,
                      ),
                    ),
                  ),
                  if (_searchKeyWord.text.isNotEmpty)
                    GestureDetector(
                      onTap: _onClear,
                      child: const Icon(Icons.clear, size: 16, color: Colors.grey),
                    ),
                ],
              ),
            ),

            const SizedBox(height: 12),

            // 动态按钮
            if (_searchKeyWord.text.isNotEmpty)
              GestureDetector(
                onTap: () => vm.search(_searchKeyWord.text),
                child: Container(
                  margin: const EdgeInsets.only(top: 4),
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF6F0FA),
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withValues(alpha: 0.1),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      )
                    ],
                  ),
                  child: Row(
                    children: [
                      const Icon(Icons.search, color: Colors.grey, size: 20),
                      const SizedBox(width: 10),
                      Expanded(
                        child: Text(
                          '搜索: ${_searchKeyWord.text}',
                          style: const TextStyle(fontSize: 14, color: Colors.black87, ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }

}
